<template>
    <treeselect :class="treeClass" v-model="model" :options="deptOptions" v-bind="$attrs" />
</template>

<script>
import { deptTreeSelect } from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
    components:{Treeselect},
    model: {
        prop: "value",
        event: "change"
    },
    data(){
        return {
            deptOptions: undefined,
            defaultProps: {
                children: "children",
                label: "label"
            },
        }
    },
    props:{
        value: {
            type: [String, Number,Array],
            default: undefined
        },
        size:{
            type:String,
            default:"default"
        }
    },
    computed: {
        model: {
            get() {
                return this.value?String(this.value):void 0
            },
            set(value) {
                this.$emit("change", value)
            }
        },
        treeClass(){
            if(this.size == "default"){
                return 'tree-select'
            }else if(this.size == "small"){
                return 'tree-select-small'
            }else if(this.size == "mini"){
                return 'tree-select-mini'
            }else{
                return ''
            }
        }
    },
    mounted(){
        this.getDeptTree();
    },
    methods:{
        /** 查询部门下拉树结构 */
        getDeptTree() {
            deptTreeSelect().then(response => {
                this.deptOptions = response.data;
            });
        },
    }
}
</script>

<style lang="scss">
.tree-select-mini{
    font-size: 12px;
    .vue-treeselect__control{
        height: 26px;
    }
    .vue-treeselect__placeholder,.vue-treeselect__single-value{
       line-height: 26px;
    }
}
.el-form-item--mini{
    .vue-treeselect{
        font-size: 12px;
    }
    .vue-treeselect__control{
        height: 28px;
    }
    .vue-treeselect__placeholder,.vue-treeselect__single-value{
        line-height: 28px;
        font-size: inherit;
    }
}
</style>
